<script setup lang="ts">
  import { PropType, ref } from 'vue'
  import {
    ArrowDown,
    CircleCheck,
    Delete,
    RefreshRight,
    Switch,
    Warning,
  } from '@element-plus/icons-vue'
  import VisibleType from './VisibleType.vue'

  defineOptions({
    name: 'HeaderKnownFaultList',
  })

  const props = defineProps({
    selectedFaultIds: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
  })

  const emits = defineEmits<{
    (e: 'add'): void
    (e: 'multiple-enable'): void
    (e: 'multiple-disable'): void
    (e: 'multiple-del'): void
    (e: 'multiple-mobile-show'): void
    (e: 'multiple-mobile-hide'): void
    (e: 'multiple-enable-report-analysis'): void
    (e: 'multiple-disable-report-analysis'): void
    (e: 'search', value: typeof searchForm.value): void
  }>()

  const visibleTypeDialogVisible = ref(false)

  // 搜索表单
  const searchForm = ref({
    faultReason: '',
    name: '',
    oneFaultTypeId: '',
    solution: '',
    threeFaultTypeId: '',
    twoFaultTypeId: '',
  })

  /**
   * 搜索点击事件
   */
  const search = () => {
    emits('search', { ...searchForm.value })
  }

  /**
   * 重置搜索条件
   */
  const resetSearchFilter = () => {
    searchForm.value.faultReason = ''
    searchForm.value.name = ''
    searchForm.value.solution = ''
  }

  /**
   * 重置点击事件
   */
  const reset = () => {
    resetSearchFilter()
    search()
  }

  defineExpose({
    reset: () => {
      resetSearchFilter()
    },
  })
</script>

<template>
  <div class="header-known-fault-list">
    <div class="btn_group">
      <HPlainButton v-permission="'know_faultAdd'" @click="emits('add')">添加故障说明</HPlainButton>
      <h-button
        v-permission="'know_faultEditVisibleType'"
        :disabled="props.selectedFaultIds.length <= 0"
        @click="visibleTypeDialogVisible = true"
        >修改可见类型</h-button
      >
      <el-dropdown trigger="click">
        <HButton :disabled="props.selectedFaultIds.length <= 0">
          批量操作
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </HButton>
        <template #dropdown>
          <el-dropdown-menu>
            <div v-permission="'know_faultEnabled'">
              <el-dropdown-item @click="emits('multiple-enable')">
                <el-icon>
                  <CircleCheck />
                </el-icon>
                批量启用
              </el-dropdown-item>
            </div>
            
            <div v-permission="'know_faultDisabled'">
              <el-dropdown-item @click="emits('multiple-disable')">
              <el-icon>
                <Warning />
              </el-icon>
              批量禁用
            </el-dropdown-item>
            </div>
            
            <div v-permission="'know_faultDelete'">
              <el-dropdown-item @click="emits('multiple-del')">
                <el-icon>
                  <Delete />
                </el-icon>
                批量删除
              </el-dropdown-item>
            </div>
            
            <div v-permission="'know_faultMobileShow'">
              <el-dropdown-item @click="emits('multiple-mobile-show')">
                <el-icon>
                  <Switch />
                </el-icon>
                批量移动端显示
              </el-dropdown-item>
            </div>
            
            
            <div v-permission="'know_faultMobileHide'">
              <el-dropdown-item @click="emits('multiple-mobile-hide')">
              <el-icon>
                <Switch />
              </el-icon>
              批量移动端隐藏
            </el-dropdown-item>
            </div>
            <div v-permission="'know_faultEnabledReport'">
              <el-dropdown-item @click="emits('multiple-enable-report-analysis')">
              <el-icon>
                <Switch></Switch>
              </el-icon>
              批量开启报表分析
            </el-dropdown-item>
            </div>
            
            <div v-permission="'know_faultDisabeldReport'">
              <el-dropdown-item @click="emits('multiple-disable-report-analysis')">
                <el-icon>
                  <Switch></Switch>
                </el-icon>
                批量关闭报表分析
              </el-dropdown-item>
            </div>
            
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="search">
      <el-input
        v-model.trim="searchForm.faultReason"
        placeholder="请输入故障原因条码"
        clearable
        class="fault-reason"
        @keyup.enter="search"
        @clear="search"
      ></el-input>
      <el-input
        v-model.trim="searchForm.name"
        placeholder="请输入故障名称/故障代码"
        clearable
        class="name"
        @keyup.enter="search"
        @clear="search"
      />
      <el-input
        v-model="searchForm.solution"
        placeholder="请输入维修措施条码"
        clearable
        class="solution"
        @keyup.enter="search"
        @clear="search"
      />
      <HButton type="primary" @click="search">
        <el-icon>
          <Search />
        </el-icon>
        搜索
      </HButton>
      <HButton @click="reset">
        <el-icon>
          <RefreshRight />
        </el-icon>
        重置
      </HButton>
    </div>

    <visible-type
      v-model:visible="visibleTypeDialogVisible"
      :ids="props.selectedFaultIds"
      @update-list="search"
    ></visible-type>
  </div>
</template>

<style lang="scss" scoped>
  .header-known-fault-list {
    display: flex;
    justify-content: space-between;

    .btn_group {
      display: flex;
      column-gap: 5px;
    }

    .search {
      display: flex;
      column-gap: 5px;

      .fault-reason {
        width: 130px;
      }

      .name {
        width: 160px;
      }

      .solution {
        width: 130px;
      }
    }
  }
</style>
